<template>
  <div class="left-content">
    <div class="left-box">
      <div class="zhaomingdiv">
        <databox :title="'照明技术指标'" :dheight="'100%'" :color="'#F8FC00'" :icon="'gaojing'">
          <div class="zhaomingitem">
            <div style="text-align: center;">
              <div class="zhaomingitemround">
                <img src="../../../assets/img/zhaoming-round.png" alt class="zhaomingitemroundimg">
                <div class="zhaomingitemroundtext">100</div>
              </div>设备
            </div>
            <div style="text-align: center;">
              <span style="font-size:30px;">{{98}}</span>个<br/><br/>
              达标
            </div>
            <div style="text-align: center;">
              <huanxing
                :id="1"
                :width="80"
                :radius="5"
                :progress="90"
                :delay="200"
                :duration="1000"
                :barColor="'#086A5E'"
                :backgroundColor="'#06A59B55'"
                :isRound="true"
                :isAnimation="true"
                :timeFunction="'cubic-bezier(0.99, 0.01, 0.22, 0.94)'"
              ></huanxing>达标率
            </div>
          </div>
        </databox>
      </div>
      <div class="tongfengdiv">
        <databox :title="'故障指标'" :dheight="'100%'" :color="'#2B97A0'" :icon="'fengche'">
          <div class="tongfengitem">
            <div style="text-align: center;">
              <div class="tongfengitemround">
                <img src="../../../assets/img/tongfeng-round.png" alt class="tongfengitemroundimg">
                <div class="tongfengitemroundtext">100</div>
              </div>设备
            </div>
            <div style="text-align: center;">
              <span style="font-size:30px;">{{98}}</span>个<br/><br/>
              达标
            </div>
            <div style="text-align: center;">
              <huanxing
                :id="1"
                :width="80"
                :radius="5"
                :progress="90"
                :delay="200"
                :duration="1000"
                :barColor="'#07BEFA'"
                :backgroundColor="'#06A59B99'"
                :isRound="true"
                :isAnimation="true"
                :timeFunction="'cubic-bezier(0.99, 0.01, 0.22, 0.94)'"
              ></huanxing>达标率
            </div>
          </div>
        </databox>
      </div>
      <div class="shebeidiv">
        <databox :title="'设备指标'" :dheight="'100%'" :color="'#2B97A0'" :icon="'icon_shezhi'">
          <div class="shebeiitem">
            <div style="text-align: center;">
              <span style="font-size:30px;">250</span><br/><br/>
              设备总数
            </div>
            <div style="text-align: center;">
              <span style="font-size:30px;">{{5}}</span>个<br/><br/>
              异常设备数量
            </div>
            <div style="text-align: center;">
              <huanxing
                :id="1"
                :width="80"
                :radius="5"
                :progress="90"
                :delay="200"
                :duration="1000"
                :barColor="'#029633'"
                :backgroundColor="'#aaa55'"
                :isRound="true"
                :isAnimation="true"
                :timeFunction="'cubic-bezier(0.99, 0.01, 0.22, 0.94)'"
              ></huanxing>设备完好率
            </div>
          </div>
          <yichang/>
        </databox>
      </div>
    </div>
  </div>
</template>
<script>
import yichang from "./chart/yichang";
import zhaoming from "./chart/zhaoming";
import yichangtrend from "./chart/yichangtrend";
import huanxing from "./chart/huanxing1";
// import message from "./message";

export default {
  components: {
    yichang,
    zhaoming,
    yichangtrend,
    huanxing
    // message
  },
  props: {},
  data() {
    return {};
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); //在vue实例销毁钱，清除我们的定时器
    }
  },
  mounted() {
    
  },
  created() {},
  methods: {},
  watch: {}
};
</script>

<style lang="scss">
.left-content {
  width: 100%;
  height: 100%;
  .left-box {
    width: 100%;
    height: 100%;
    // padding-bottom: 40px;
    .zhaomingdiv {
      height: 20%;
      // padding: 20px;
      .zhaomingitem {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        padding: 20px 30px;
        height: 100%;
        .zhaomingitemround {
          position: relative;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          .zhaomingitemroundimg {
            width: 90%;
            // position: absolute;
          }
          .zhaomingitemroundtext {
            position: absolute;
            font-size: 30px;
          }
        }
      }
    }
    .tongfengdiv {
      height: 20%;
      padding: 10px 0px;
      .tongfengitem {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        padding: 20px 30px;
        .tongfengitemround {
          position: relative;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          .tongfengitemroundimg {
            width: 90%;
            // position: absolute;
          }
          .tongfengitemroundtext {
            position: absolute;
            font-size: 30px;
          }
        }
      }
    }
    .shebeidiv {
      height: 60%;
      .shebeiitem {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        padding: 20px 30px 0px 30px;
      }
    }
  }
}
</style>